<template>


  <div>

    <div>
      <a href="">
        https://github.com/akumatus/FilterBuilder.git
      </a>
    </div>

    <div>
      <AndOr :options="options" :isFirst="isFirst" ref="andOr"></AndOr>
      <button class="btn btn-xs btn-purple add-rule pull-right" @click.prevent="getVal"> 打印</button>
      <pre>{{ this.query }}</pre>
    </div>

  </div>

</template>
<script>

import '../../assets/static/css/AdminLTE.min.css'
import '../../assets/static/css/bootstrap.min.css'
import '../../assets/static/css/font-awesome.min.css'
import '../../assets/static/css/magic-cube.css'
import AndOr from "./components/AndOR.vue"

export default {
  components: {
    AndOr
  },
  data() {
    return {
      query: {},
      options: {
        keys: [{
          name: 'Choose Key',
          id: -99
        }, {
          name: 'Crash Number',
          id: 134
        }, {
          name: 'Daily Startup',
          id: 256
        }],
        operators: [{
          name: 'Choose Operator',
          id: -99
        }, {
          name: 'more',
          id: '>'
        }, {
          name: 'equal',
          id: '='
        }, {
          name: 'less',
          id: '<'
        }]
      },
      isFirst: true
    };
  },
  methods: {
    getVal() {
      this.query = this.$refs.andOr.queryFormStatus()
    }
  }
}
</script>

<style scoped>

header {
  line-height: 1.5;
}

.logo {
  display: block;
  margin: 0 auto 2rem;
}

@media (min-width: 1024px) {
  header {
    display: flex;
    place-items: center;
    padding-right: calc(var(--section-gap) / 2);
  }

  .logo {
    margin: 0 2rem 0 0;
  }

  header .wrapper {
    display: flex;
    place-items: flex-start;
    flex-wrap: wrap;
  }
}
</style>
